<template>
	<view class="rui-swiper">
		<swiper class="swiper" circular :indicator-dots="dots" :autoplay="auto" :interval="interval">
			<swiper-item>
				<view class="rui-swiper_item">
					<image class="rui-swiper_item_img" src="/static/swiper.jpg" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="rui-swiper_mask"></view>
	</view>
	<view class="rui-swiper_slot">
		<slot></slot>
	</view>

</template>
<script setup>
	import {
		ref
	} from "vue"

	defineProps({
		dots: {
			type: Boolean,
			default: true,
		},
		auto: {
			type: Boolean,
			default: true,
		},
		interval: {
			type: Number,
			default: 3000
		},
		list: Array
	})
</script>
<style lang="scss" scoped>
	.swiper {
		height: 480rpx;
	}

	.rui-swiper {
		position: relative;
		--h: 150rpx;
		&_slot{
			margin-top: -150rpx;
			position: relative;
			z-index: 9;
		}
		&_item {
			&_img {
				width: 100%;
			}
		}

		&_mask {
			background: linear-gradient(180deg, rgba(0, 0, 0, 0), #f6f8fb);
			position: absolute;
			bottom: 0;
			left: 0;
			// z-index: 2;
			height: var(--h);
			width: 100%;
		}
	}
</style>